<template>
  <div class="aboutKt">
    <div class="banner">
      <img :src = 'bannerImg'>
    </div>
    <div class="content">
      <ul class='menu'>
        <li v-for='item in nav' :key='item.code'>
          <span @click="returnItem(item.code)">
            {{item.title}}
          </span>
        </li>
      </ul>
      <div class='gsjj' id="gsjj">
        <h2>公司简介</h2>
        <h3>Company Profile</h3>
        <div class="gsjj-bottom">
          <div class="left">
            <h4>专注于天气风险解决方案，<br>服务网络遍布全球。</h4>
            <p>昆特科技是一家专注于天气风险服务的国家高新技术企业，是一家为自然灾害防御提供解决方案，并充分利用气象与水文大数据开展商业应用的民营企业，案例遍布全国23个省份约1150个县区。公司研发中心总部设置于成都（下辖北京、深圳、南京、海口、沈阳、兰州、武汉等七个研发分部），并配置有数据研究院与培训中心。公司的基础业务，围绕天气大数据的监测采集、模式处理、结果发布，服务于应急管理、智慧城市、智慧社区、互联网+水利、农业金融、旅游/生态、智慧校园、新能源、航空/码头等领域。</p>
          </div>
          <div class="right" @click="wrapShow">
            <img :src='videoImg'/>
            <img class="play" src="../assets/images/play.png"/>
          </div>
        </div>
      </div>
      <div id="fzlc" class="fzlcs">
        <h2>发展历程</h2>
        <h3>Development Path</h3>
        <fzlc></fzlc>
      </div>
      <div id="zzry" class="zzry">
        <h2>资证荣誉</h2>
        <h3>Certificate Honor</h3>
        <ul class='zzryList'>
          <li v-for='( item, index ) in zhengShu' :key='index'>
            <img :src = 'item.img'>
            <h4>{{item.name}}</h4>
            <p>{{item.text}}</p>
          </li>
        </ul>
      </div>
      <div id="lxwm" class="lxwm">
        <div class="top">
          <h2>联系我们</h2>
          <h3>Contact Us</h3>
          <h4>昆特核心优势，<br>天气风险解决方案领导者!</h4>
          <p>经民政部批准成立的"中国气象服务协会"发起单位之一，中国气象服务协会常务理事，深圳市减灾救灾联合会、气象减灾学会及应急管理学会理事会员，国家突发事件预警发布平台建设者之一。</p>
        </div>
        <div class="bottom">
          <div class="left">
            <p>公司电话：{{contact.tel}}</p>
            <p>传真：{{contact.fax}}</p>
            <p>邮件：{{contact.email}}</p>
            <p>公司地址：{{contact.address}}</p>
            <div class="bottom-bottom">
              <div class="bottom-left">
                <img :src='contact.ewm' alt="">
              </div>
              <div class="bottom-right">
                <p>官方微信公众号<br>了解公司最新动态</p>
                <p>Official WeChat public number<br>Get the latest news from the company</p>
              </div>
            </div>
          </div>
          <div id="container" class="right">
            <maps></maps>
          </div>
        </div>
      </div>
    </div>
    <div :class="[videoWrap]" @click="wrapHide">
      <video @click.stop controls="controls" :src ='videoSrc' :poster='videoImg'></video>
    </div>
  </div>
</template>
<script>
import maps from '../components/Map'
import fzlc from '../components/Fzlc'
export default {
  name: 'Gykt',
  components: {
    'maps': maps,
    'fzlc': fzlc
  },
  data () {
    return {
      videoWrap: 'videoWrapHide',
      bannerImg: require('../assets/images/gyBanner.png'),
      videoImg: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.png',
      videoSrc: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4',
      nav: [
        {
          title: '公司简介',
          code: 'gsjj'
        },
        {
          title: '发展历程',
          code: 'fzlc'
        },
        {
          title: '资证荣誉',
          code: 'zzry'
        },
        {
          title: '联系我们',
          code: 'lxwm'
        }
      ],
      contact: {
        tel: '+86-0755-8627 7818',
        fax: '+86-0755-8627 7938',
        email: 'kunt@kwantler.com',
        address: '深圳市南山区龙珠大道珠光创新科技园3栋4层',
        ewm: require('../assets/images/gfwx.png')
      },
      zhengShu: [
        {
          img: require('../assets/images/zhengshuTop.png'),
          code: 'zhengshuTop',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuTop.png'),
          code: 'zhengshuTop',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuTop.png'),
          code: 'zhengshuTop',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuTop.png'),
          code: 'zhengshuTop',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuBottom.png'),
          code: 'zhengshuBottom',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuBottom.png'),
          code: 'zhengshuBottom',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuBottom.png'),
          code: 'zhengshuBottom',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        },
        {
          img: require('../assets/images/zhengshuBottom.png'),
          code: 'zhengshuBottom',
          name: '外观设计专利证书',
          text: '产品外观设计专利证书'
        }
      ]
    }
  },
  methods: {
    returnItem: function (code) {
      document.querySelector('#' + code).scrollIntoView(true)
    },
    wrapHide (e) {
      this.videoWrap = 'videoWrapHide'
      this.videoSrc = ''
    },
    wrapShow (e) {
      this.videoWrap = 'videoWrapShow'
      this.videoSrc = 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4'
    }
  }
}
</script>
<style lang="less" scoped>
.aboutKt{
  .banner{
    width: 100%;
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .videoWrapShow{
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    width:100vw;
    height:100vh;
    background: rgba(0,0,0,0.8);
    video{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
  }
  .videoWrapHide{
    display: none;
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .menu{
      overflow: hidden;
      height: 80px;
      line-height: 80px;
      width: 470px;
      margin: 0 auto;
      li{
        cursor: pointer;
        float: left;
        font-size: 20px;
        margin-right: 50px;
        color: #666666;
        font-family: 'PingFang-SC-Medium';
        &:last-of-type{
          margin: 0;
        }
        &:hover{
          span{
            color: #62C3D9;
            border-bottom: #62C3D9 solid 2px;
            padding: 6px 0;
          }
        }
        &:first-of-type{
          span{
            color: #62C3D9;
            border-bottom: #62C3D9 solid 2px;
            padding: 6px 0;
          }
        }
      }
    }
    .gsjj{
      padding-top: 40px;
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
      .gsjj-bottom{
        margin-top: 50px;
        position: relative;
        // height: 400px;
        overflow: hidden;
        .left{
          width: 700px;
          // position: absolute;
          // top: 0;
          // left: 0;
          float: left;
          h4{
            font-size: 24px;
            color: #333333;
            font-weight: bold;
            line-height: 40px;
          }
          p{
            padding-top: 20px;
            font-size: 14px;
            color: #666666;
            line-height: 30px;
          }
          img{
            margin-top: 50px;
            width: 100px;
            height:40px;
          }
        }
        .right{
          float: right;
          margin-left: 64px;
          width:432px;
          height:283px;
          border-radius:10px;
          overflow:hidden;
          position: relative;
          img{
            width:100%;
            height:100%;
            &.play{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
              z-index: 99;
              width: 80px;
              height: 80px;
            }
          }
        }
      }
    }
    .fzlcs{
      margin-top: 80px;
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
        margin-bottom: 50px;
      }
    }
    .zzry{
      padding-top: 80px;
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
      .zzryList{
        width:1200px;
        overflow:hidden;
        height:auto;
        li{
          float:left;
          width:300px;
          text-align:center;
          margin-top:50px;
          img{
            width:175px;
            height:240px;
            margin:0 auto;
          }
          h4{
            font-size:16px;
            color:#333333;
            padding-top:30px;
          }
          p{
            font-size:14px;
            color:#999999;
            line-height:30px;
          }
          &:nth-of-type(n+5){
            img{
              width:210px;
              height:164px;
            }
            p{
            padding-bottom:0px;
          }
          }
        }
      }
    }
    .lxwm{
      padding-top: 80px;
      .top{
        border-bottom: solid 1px #eeeeee;
        h2{
          text-align: center;
          font-size:52px;
          font-family:Lato-Light;
          font-weight:300;
          color:rgba(51,51,51,1);
          line-height:52px;
        }
        h3{
          text-align: center;
          font-size:24px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
          line-height:60px;
          // letter-spacing: 80px;
          // padding-left: 80px;
        }
        h4{
          font-size: 24px;
          font-weight: bold;
          font-family: 'PingFang-SC-Bold';
          color: #333333;
          line-height: 40px;
        }
        p{
          font-size: 14px;
          font-family: 'PingFang-SC-Medium';
          font-weight: 500;
          color: #666666;
          line-height: 35px;
          letter-spacing: 0px;
          padding: 20px 0 40px 0;
        }
      }
      .bottom{
        overflow: hidden;
        height: 400px;
        .left{
          float: left;
          padding-top: 36px;
          p{
            line-height: 35px;
            font-weight: 500;
            color: #333333;
          }
          .bottom-bottom{
            overflow: hidden;
            margin-top: 30px;
            .bottom-left{
              float: left;
              img{
                width: 145px;
                height: 145px;
              }
            }
            .bottom-right{
              float: left;
              margin-left: 50px;
              p{
                color: #333333;
                line-height: 20px;
                &:first-of-type{
                  font-size: 14px;
                  padding-top: 30px;
                }
                &:last-of-type{
                  padding-top: 8px;
                  font-size: 12px;
                  text-transform: uppercase;
                }
              }
            }
          }
        }
        .right{
          float: right;
          width: 510px;
          height: 270px;
          background: #62C3D9;
          border-radius: 50px;
          margin-top: 50px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
